<script lang="ts" setup>
	import { ref, onMounted, computed } from 'vue'
	import { getAllArticlesBytnId, getArticlesClassPage } from '@/api/article.js';

	onMounted(() => {
		getVideoArticle()
	})

	const size = ref(4)
	const current = ref(1)
	const totalData = ref(0)
	const changePage = (e) => {
		console.log(e)
		current.value = e.current
		getVideoArticle()
	}
	const videoArticleList = ref([])
	const getVideoArticle = () => {
		let item = {
			tenantId: 0,
			artClassId: "1735206032477929474",
			size: size.value,
			current: current.value
		}
		getArticlesClassPage(item).then((res) => {
			if (res.data.success) { videoArticleList.value = [...res.data.data.records]; totalData.value = res.data.data.total }
		})

	}

	const toArticle = (id) => {
		uni.navigateTo({
			url: '/pages/video/videoArt?id=' + id,
		});
	}

	const back = () => {
		// uni.reLaunch({
		// 	url: '/pages/index/home/home'
		// })

		uni.navigateBack()
	}
	const timer = ref(null)
	const handleEnd = () => {
		timer.value.resetTime()
	}
</script>

<template>
	<articleTable ref="timer"></articleTable>
	<img :src="'@/../static/img/bgIcon/video.svg'"
		style="opacity: 0.2;width: 25%;position: absolute;bottom: 0%;right: 2%;" />
	<Navigator :fixed="true" background-color="transparent" status-bar left-icon="back" left-text="返回" @clickLeft="back"
		customLeft title="心理影片" class="absolute zIndex1" style="height: 2vh;">
	</Navigator>

	<view @touchend="handleEnd" class="wh100p flex column-center"
		style="background: linear-gradient(90deg, #0078BB 0%, #003E94 100%);padding: 1% 4%; box-sizing: border-box;">
		<view class="videoArticle-box w100p zIndex3">
			<view style="height: 94%;">
				<view class="videoArticle-item" v-for="(item,index) in videoArticleList" :key="index"
					@click="toArticle(item.id)">
					<view class="videoArticle-title w100p flex-between column-center">
						<text>{{item.name}}</text>
						<text style="color: #348BFD;font-size: 28px;">点击查看</text>
					</view>

					<text class="videoArticle-author">发布时间：{{item.createTime}}</text>


					<text class="videoArticle-dec">{{item.artDesc}}</text>

				</view>
			</view>
			<view class="custom flex-center " style="height: 6%;color: white;align-items: flex-end;">
				<uni-pagination :total="totalData" prev-text="上一页" next-text="下一页" :pageSize="size" @change="changePage"
					:current="current" />
			</view>
		</view>
	</view>
</template>

<style>
	.videoArticle-box {

		height: 85%;
		padding: 2% 3%;

		border-radius: 12px;
		background: rgba(0, 0, 0, 0.20);
	}

	.videoArticle-item {
		display: flex;
		/* padding: 24px 0px; */
		box-sizing: border-box;
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 8px;
		align-self: stretch;
		border-bottom: 1px solid rgba(255, 255, 255, 0.50);
		height: 24%;
	}

	.videoArticle-title {
		color: #F6FBFF;
		font-family: PingFang SC;
		font-size: 36px;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
	}

	.videoArticle-author {
		color: #80C0FF;
		font-family: PingFang SC;
		font-size: 28px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		margin-top: 0.5%;
	}

	.videoArticle-dec {
		color: #F6FBFF;
		font-family: PingFang SC;
		font-size: 28px;
		font-style: normal;
		font-weight: 400;
		line-height: 48px;
		margin-top: 0.5%;
		/* 171.429% */
	}

	* {
		box-sizing: border-box;
	}
	
	/deep/.custom .uni-pagination__num-tag {
		margin: 0 8px;
		font-size: 18px;
		padding: 0 10px;
	}
	
	/deep/.custom .uni-pagination__total {
		font-size: 18px;
		color: white;
		margin-right: 20px;
	}
	
	/deep/.custom .uni-pagination__child-btn {
		font-size: 18px;
	
	}
</style>